<div>
  <form nz-form [formGroup]="validateForm" (ngSubmit)="_submitForm()">
    <!-- password form -->
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
        <label for="password" nz-form-item-required>Password</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <nz-input [nzSize]="'large'" formControlName="password" [nzType]="'password'" 
          [nzId]="'password'" (ngModelChange)="updateConfirmValidator()"></nz-input>
        <div nz-form-explain 
          *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">
          Please input your password!
        </div>
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
        <label for="checkPassword" nz-form-item-required>Confirm</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
        <nz-input [nzSize]="'large'" formControlName="checkPassword" [nzType]="'password'" [nzId]="'checkPassword'"></nz-input>
        <div nz-form-explain 
          *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">
          Please confirm your password!
        </div>
        <div nz-form-explain 
          *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">
          Two passwords that you enter is inconsistent!
        </div>
      </div>
    </div>

    <!-- button -->
    <div class="customize-footer">
        <button type="button" nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">
          返 回
        </button>
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="isConfirmLoading">
          修 改
        </button>
      </div>
  </form>
</div>